<template>
  <div id="app">
    <div class="mainCard">
      <div class="title">
        <el-button type="text" @click="loginDiv" :style="{color: loginTitleColor}">登录</el-button>
        <b>·</b>
        <el-button type="text" @click="registerDiv" :style="{color: registerTitleColor}">注册</el-button>
      </div>
      <div class="register" :style="{display: registerDisplay}">
        <el-form
          :model="registerForm"
          ref="registerForm"
          :rules="registerRules"
          label-width="100px"
          class="demo-dynamic"
        >
          <el-form-item prop="name" label-width="0">
            <el-input placeholder="用户名" v-model="registerForm.name" suffix-icon="el-icon-user"></el-input>
          </el-form-item>
          <el-form-item prop="password" label-width="0">
            <el-input
              placeholder="密码"
              v-model="registerForm.password"
              suffix-icon="el-icon-lock"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item prop="passwordConfirm" label-width="0">
            <el-input
              placeholder="确认密码"
              v-model="registerForm.passwordConfirm"
              suffix-icon="el-icon-lock"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label-width="0">
            <el-button
              type="primary"
              @click="submitRegisterForm('registerForm')"
              style="margin: 0 122px;"
            >提交</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="login" :style="{display: loginDisplay}">
        <el-form
          :model="loginForm"
          ref="loginForm"
          label-width="100px"
          :rules="loginRules"
          class="demo-dynamic"
        >
          <el-form-item prop="lid" label-width="0">
            <el-input placeholder="账号" v-model="loginForm.lid" suffix-icon="el-icon-user"></el-input>
          </el-form-item>
          <el-form-item prop="password" label-width="0">
            <el-input
              placeholder="密码"
              v-model="loginForm.password"
              suffix-icon="el-icon-lock"
              show-password
            ></el-input>
          </el-form-item>
          <!-- <Verify
            @success="'success'"
            :mode="'fixed'"
            :captchaType="'blockPuzzle'"
            :imgSize="{ width: '330px', height: '155px' }"
          ></Verify> -->
          <el-form-item label-width="0">
            <el-button
              type="primary"
              @click="submitLoginForm('loginForm')"
              style="margin: 0 122px;"
            >提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>


<script>
import { getInstance } from '@/utils/request';
// import Verify from "./../../components/verifition/Verify";
const instance = getInstance();
export default {
  // components: {
  //   Verify
  // },
  methods: {
    success (params) {
      this.$message(params);
    },
    getElemVal (id) {
      return document.getElementById(id).value;
    },
    submitRegisterForm (formName) {
      var that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = Object.assign(this.registerForm, {
            appId: that.client_id,
            redirectUri: that.redirect_uri,
          });
          instance.post('/oidc/register', data)
            .then((response) => {
              if (response.data.result === 0) {
                window.location.href = this.url;
              } else {
                that.$message.error(response.data.msg);
              }
            })
            .catch(function () {
              that.$message.error('发送失败');
            });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    submitLoginForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = Object.assign(this.loginForm, {
            appId: this.client_id,
            redirectUri: this.redirect_uri,
          });
          instance.post('/oidc/check_psw', data)
            .then((response) => {
              if (response.data.result === 0) {
                window.location.href = self.url;
              } else {
                alert(response.data.msg);
                // this.$message({
                //   message: response.data.msg,
                //   type: 'error'
                // });
                // this.$message.error(response.data.msg);
              }
            })
            .catch(function (error) {
              console.log(error);
              alert('发送失败');
              // this.$message({
              //   message: '发送失败',
              //   type: 'error'
              // });
              // this.$message.error('发送失败');
            });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    registerDiv () {
      this.registerDisplay = 'block';
      this.loginDisplay = 'none';
      this.loginTitleColor = '#969696';
      this.registerTitleColor = '#409eff';
    },
    loginDiv () {
      this.registerDisplay = 'none';
      this.loginDisplay = 'block';
      this.loginTitleColor = '#409eff';
      this.registerTitleColor = '#969696';
    }
  },
  data: function () {
    return {
      loginRules: {
        lid: { required: true, message: '请输入账号', trigger: 'blur' },
        password: { required: true, message: '请输入密码', trigger: 'blur' },
      },
      registerRules: {
        name: { required: true, message: '请输入用户名', trigger: 'blur' },
        password: { required: true, message: '请输入密码', trigger: 'blur' },
        passwordConfirm: { required: true, message: '请输入确认密码', trigger: 'blur' },
      },
      loginTitleColor: '#969696', // 灰色
      registerTitleColor: '#409eff', //蓝色
      registerDisplay: 'block',
      loginDisplay: 'none',
      registerForm: {
        name: '',
        password: '',
        passwordConfirm: '',
      },
      loginForm: {
        lid: '',
        password: '',
      },
      client_id: window.client_id,
      redirect_uri: window.redirect_uri,
      url: window.url,
    };
  }
};
</script>

<style>
body {
  background-color: #f1f1f1;
}
.mainCard {
  width: 313px;
  height: 600px;
  background: #fff;
  border-radius: 10px;
  margin: 200px auto;
  vertical-align: middle;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  padding: 68px 84px 59px;
}
.title {
  margin: 0px 76px 70px;
}
.title .el-button {
  font-size: 35px;
}
</style>